<template>
	<scroll-view class="container" scroll-y="true" show-scrollbar="false" lower-threshold="20"
		@scrolltolower="handleScroll">
		<view class="header">
			<view class="header-title">人员管理</view>
		</view>
		<view class="query-selector">
			<el-cascader ref="cascader" placeholder="试试搜索：高级权限" style="width: 80%;" :options="options"
				:props="{ multiple: true }" filterable clearable v-model="currentSelect"></el-cascader>
			<button class="query-button" @click="handleQuery">查询</button>
		</view>
		<div style="padding: 0 12px; line-height: 28px; font-size: 14px; color: #666;">所有人员（
			<span>{{ memberCount }}</span>
			人）
		</div>
		<ul class="member-list">
			<li v-for="(item, index) in selectedMember" :key="index">
				<MemberItem :account="item.account" :name="item.name" :type="item.type" :avatarUrl="item.avatarUrl">
				</MemberItem>
			</li>
		</ul>
	</scroll-view>
</template>

<script>
	import request from "/utils/http.js";
	import MemberItem from '/components/MemberListItem.vue';
	import {
		getUsers,
	} from "@/api/user";

	export default {
		components: {
			MemberItem
		},

		data() {
			return {
				options: [{
						value: 'gaojiquanxian',
						label: '高级权限',
						children: []
					},
					{
						value: 'zhongjiquanxian',
						label: '中级权限',
						children: []
					},
					{
						value: 'chujiquanxian',
						label: '初级权限',
						children: []
					}
				],
				memberList: [],
				currentSelect: [],
				selectedMember: []
			}
		},

		computed: {
			memberCount() {
				return this.memberList.length;
			},
		},

		watch: {
			currentSelect: {
				handler(newVal, oldVal) {
					if (newVal.length === 0) {
						this.selectedMember = this.memberList;
					}
				},
			}
		},

		onLoad: async function() {
			await this.fetchData();
		},

		methods: {
			async fetchData() {
				const result = await getUsers("admin");
				if (result.code === 200) {
					const data = result.data;
					this.memberList = data.map(d => ({
						id: d.id,
						account: d.account,
						name: d.name,
						type: d.userRight,
						avatarUrl: d.avatarUrl
					}));
					// console.log(this.memberList);
					this.selectedMember = this.memberList;
					this.memberList.forEach(m => {
						if (m.type === 2) {
							this.options[0].children.push({
								value: m.account,
								label: m.name
							})

						} else if (m.type === 1) {
							this.options[1].children.push({
								value: m.account,
								label: m.name
							})
						} else {
							this.options[2].children.push({
								value: m.account,
								label: m.name
							})
						}
					})
				}
			},

			handleQuery() {
				this.currentSelect = this.currentSelect.map(i => i[1]);
				this.selectedMember = this.memberList.filter(m => this.currentSelect.includes(m
					.account));
				console.log(this.currentSelect);
			},

			handleScroll() {
				console.log("scrolling");
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		width: 100vw;
		height: 95dvh;
		box-sizing: border-box;
	}

	.header {
		background-color: #BD3124;
		padding: 0 30rpx 20rpx;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
	}

	.query-selector {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 4px 8px;
	}

	.query-button {
		background-color: #BD3124;
		height: 32px;
		line-height: 32px;
		font-size: 14px;
		border-radius: 8px;
		color: #FFF;
	}

	.query-button:active {
		background-color: #a82b1f;
	}

	.member-list {
		padding: 0;
		list-style-type: none;
	}
</style>